/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

#button {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
    text-transform: none;
    vertical-align: top;
    -webkit-appearance: button;
    transition:
        background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
        border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
        color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
        box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
    justify-content: center;
    align-items: center;
    margin: 0;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: inline-flex;
    position: relative;
    overflow: visible;
}

#button::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

#button:focus {
    outline: none;
}

:host {
    --spectrum-picker-font-size: var(--spectrum-font-size-100);
    --spectrum-picker-font-weight: var(--spectrum-regular-font-weight);
    --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style);
    --spectrum-picker-line-height: var(--spectrum-line-height-100);
    --spectrum-picker-block-size: var(--spectrum-component-height-100);
    --spectrum-picker-inline-size: var(--spectrum-field-width);
    --spectrum-picker-border-radius: var(--spectrum-corner-radius-100);
    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
    --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet);
    --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component);
    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100);
    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium);
    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium);
    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium);
    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium);
    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium);
    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
    --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
    --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet);
    --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100);
    --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default);
    --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus);
    --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-picker-font-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
    --spectrum-picker-font-color-active: var(--spectrum-neutral-content-color-down);
    --spectrum-picker-font-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-picker-icon-color-default: var(--spectrum-neutral-content-color-default);
    --spectrum-picker-icon-color-default-open: var(--spectrum-neutral-content-color-focus);
    --spectrum-picker-icon-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-picker-icon-color-hover-open: var(--spectrum-neutral-content-color-focus-hover);
    --spectrum-picker-icon-color-active: var(--spectrum-neutral-content-color-down);
    --spectrum-picker-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-picker-border-color-error-default: var(--spectrum-negative-border-color-default);
    --spectrum-picker-border-color-error-default-open: var(--spectrum-negative-border-color-focus);
    --spectrum-picker-border-color-error-hover: var(--spectrum-negative-border-color-hover);
    --spectrum-picker-border-color-error-hover-open: var(--spectrum-negative-border-color-focus-hover);
    --spectrum-picker-border-color-error-active: var(--spectrum-negative-border-color-down);
    --spectrum-picker-border-color-error-key-focus: var(--spectrum-negative-border-color-key-focus);
    --spectrum-picker-icon-color-error: var(--spectrum-negative-visual-color);
    --spectrum-picker-background-color-disabled: var(--spectrum-disabled-background-color);
    --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color);
    --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color);
    --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
    --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
    --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color);
}

:host([size="s"]) {
    --spectrum-picker-font-size: var(--spectrum-font-size-75);
    --spectrum-picker-block-size: var(--spectrum-component-height-75);
    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75);
    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75);
    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small);
    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small);
    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small);
    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small);
    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small);
    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
    --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
}

:host([size="l"]) {
    --spectrum-picker-font-size: var(--spectrum-font-size-200);
    --spectrum-picker-block-size: var(--spectrum-component-height-200);
    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200);
    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200);
    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large);
    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large);
    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large);
    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large);
    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large);
    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
    --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
}

:host([size="xl"]) {
    --spectrum-picker-font-size: var(--spectrum-font-size-300);
    --spectrum-picker-block-size: var(--spectrum-component-height-300);
    --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
    --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
    --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300);
    --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300);
    --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large);
    --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large);
    --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large);
    --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large);
    --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large);
    --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
    --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
}

@media (forced-colors: active) {
    :host {
        --highcontrast-picker-focus-indicator-color: Highlight;
        --highcontrast-picker-border-color-default: ButtonBorder;
        --highcontrast-picker-border-color-hover: Highlight;
        --highcontrast-picker-border-color-disabled: GrayText;
        --highcontrast-picker-content-color-default: ButtonText;
        --highcontrast-picker-content-color-disabled: GrayText;
        --highcontrast-picker-background-color: ButtonFace;
    }

    #button.is-keyboardFocused,
    #button:focus-visible {
        --highcontrast-picker-border-color-hover: ButtonText;
    }

    #button .label,
    #button:after {
        forced-color-adjust: none;
    }
}

#button {
    box-sizing: border-box;
    max-inline-size: 100%;
    min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)));
    inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size));
    block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size));
    border-width: var(--mod-picker-border-width, var(--spectrum-picker-border-width));
    border-radius: var(--mod-picker-border-radius, var(--spectrum-picker-border-radius));
    transition:
        background-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
        box-shadow var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)),
        border-color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
    border-style: solid;
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default)));
    margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker));
    padding-block: 0;
    padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text));
    padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon));
    display: flex;
}

#button:after {
    pointer-events: none;
    content: "";
    block-size: calc(100% + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2);
    inline-size: calc(100% + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2 + var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2);
    border-style: solid;
    border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness));
    border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
    border-color: #0000;
    margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
    margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1);
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
}

#button:active {
    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active)));
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active)));
}

#button:active:after {
    border-color: #0000;
}

#button.placeholder:active .label {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active)));
}

#button.is-keyboardFocused,
#button:focus-visible {
    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-key-focus, var(--spectrum-picker-background-color-key-focus)));
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-key-focus, var(--spectrum-picker-border-color-key-focus)));
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
    outline: none;
}

#button.is-keyboardFocused:after,
#button:focus-visible:after {
    border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
}

#button.is-keyboardFocused .label.placeholder,
#button:focus-visible .label.placeholder {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
}

#button.is-keyboardFocused .picker,
#button:focus-visible .picker {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-key-focus, var(--spectrum-picker-icon-color-key-focus)));
}

:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open)));
    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open)));
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open)));
}

:host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .picker {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default-open, var(--spectrum-picker-icon-color-default-open)));
}

:host([invalid]) #button:not(:disabled, .is-disabled) {
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default, var(--spectrum-picker-border-color-error-default)));
}

:host([invalid]) #button:not(:disabled, .is-disabled) .validation-icon {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-error, var(--spectrum-picker-icon-color-error)));
}

:host([invalid]) #button:not(:disabled, .is-disabled):active {
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-active, var(--spectrum-picker-border-color-error-active)));
}

:host([invalid][open]) #button:not(:disabled, .is-disabled) {
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-default-open, var(--spectrum-picker-border-color-error-default-open)));
}

:host([invalid]) #button.is-keyboardFocused:not(:disabled, .is-disabled),
:host([invalid]) #button:not(:disabled, .is-disabled):focus-visible {
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus)));
}

:host([pending]) #button .picker {
    color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
}

:host([invalid]) #button .label,
:host([pending]) #button .label {
    margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end)));
}

.icon {
    flex-shrink: 0;
    margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
}

.label {
    white-space: nowrap;
    font-size: var(--mod-picker-font-size, var(--spectrum-picker-font-size));
    line-height: var(--mod-picker-line-height, var(--spectrum-picker-line-height));
    font-weight: var(--mod-picker-font-weight, var(--spectrum-picker-font-weight));
    text-overflow: ellipsis;
    text-align: start;
    flex: auto;
    padding-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text));
    padding-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
    overflow: hidden;
}

.label.placeholder {
    font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight));
    font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style));
    transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out;
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
}

.label.placeholder:active {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active)));
}

.picker {
    vertical-align: top;
    transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out;
    margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
    margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon));
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default)));
    flex-shrink: 0;
    display: inline-block;
    position: relative;
}

.picker:active {
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-active, var(--spectrum-picker-icon-color-active)));
}

.validation-icon {
    flex-shrink: 0;
    margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
    margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
}

#button .progress-circle {
    margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
    margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
}

.label ~ .picker {
    margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon));
}

:host([quiet]) #button {
    inline-size: auto;
    min-inline-size: 0;
    padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet));
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
    background-color: initial;
    background-color: var(--highcontrast-picker-background-color, transparent);
    border: none;
    border-radius: 0;
    margin-block-start: calc(var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + 1px);
}

:host([quiet]) #button.label-inline {
    margin-block-start: 0;
}

:host([quiet]) #button .picker {
    margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet));
}

:host([quiet]) #button:after {
    block-size: auto;
    inline-size: auto;
    border: none;
}

@media (hover: hover) {
    #button:hover {
        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover)));
        background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover)));
        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover)));
    }

    #button:hover .picker {
        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover, var(--spectrum-picker-icon-color-hover)));
    }

    :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover {
        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover-open, var(--spectrum-picker-font-color-hover-open)));
        background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover-open, var(--spectrum-picker-background-color-hover-open)));
        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover-open, var(--spectrum-picker-border-color-hover-open)));
    }

    :host([open]) #button:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .picker {
        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-hover-open, var(--spectrum-picker-icon-color-hover-open)));
    }

    :host([invalid]) #button:not(:disabled, .is-disabled):hover {
        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover, var(--spectrum-picker-border-color-error-hover)));
    }

    :host([invalid][open]) #button:not(:disabled, .is-disabled):hover {
        border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open)));
    }

    .label.placeholder:hover {
        color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover)));
    }

    :host([quiet]) #button:hover {
        background-color: initial;
        background-color: var(--highcontrast-picker-background-color, transparent);
    }
}

:host([quiet]) #button.is-keyboardFocused,
:host([quiet]) #button:focus-visible {
    background-color: initial;
    background-color: var(--highcontrast-picker-background-color, transparent);
}

:host([quiet]) #button.is-keyboardFocused:after,
:host([quiet]) #button:focus-visible:after {
    box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
    margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0;
    border: none;
    border-radius: 0;
}

:host([quiet][open]) #button,
:host([quiet][disabled]) #button#button,
:host([quiet]) #button#button:disabled,
:host([quiet]) #button:active {
    background-color: initial;
    background-color: var(--highcontrast-picker-background-color, transparent);
}

.label-inline {
    vertical-align: top;
    display: inline-flex;
}

:host([disabled]) #button,
#button:disabled {
    cursor: default;
    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled)));
    border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled));
    color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
}

:host([disabled]) #button .icon,
:host([disabled]) #button .picker,
:host([disabled]) #button .validation-icon,
#button:disabled .icon,
#button:disabled .picker,
#button:disabled .validation-icon {
    color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
}

:host([disabled]) #button .label.placeholder,
#button:disabled .label.placeholder {
    color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
}
